<template>
  <div class="comp-programme-banner-wrapper">
    <div class="insurance-1-center">
      <h3>{{ proInsuranceInfo.bannerH3 }}</h3>
      <p>
        {{ proInsuranceInfo.bannerp }}
      </p>
    </div>
    <div class="insurance-1-img">
      <img :src="proInsuranceInfo.bannerImg1" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "ProBanner",
  props: {
    proInsuranceInfo: {
      type: Object,
      default: "",
    },
  },
};
</script>

<style scoped lang="less">
.comp-programme-banner-wrapper {
  background-color: #3880e7;
  width: 1174px;
  height: 541px;
  margin: 0 auto;
  display: flex;
  z-index: 1;
  .insurance-1-center {
    color: aliceblue;
    flex: 1;
    text-align: left;
    h3 {
      padding-top: 120px;
      font-size: 62px;
      font-weight: 500;
      color: #ffffff;
      line-height: 93px;
    }
    p {
      font-size: 30px;
      color: #ffffff;
      line-height: 56px;
      font-weight: 400;
    }
  }
  .insurance-1-img {
    width: 490px;
    margin-left: 62px;
    img {
      width: 100%;
    }
  }
}
</style>